<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>训练页</title>
	    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
        <meta name="viewport" content="user-scalable=0,width=device-width,initial-scale=1.0" >
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
	    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>
	<style type="text/css">
		    *{
			    margin: 0px;
			    padding: 0px;
		}
			div.search {
				padding: 10px 0;
				} 
			form { 
				position: relative;
			    width: 300px;
			    margin: 0 auto; 
			    } 
			input, button { 
				border: none; 
				outline: none; 
				} 
			input { 
				width: 100%;
			    height: 42px; 
			    padding-left: 13px; 
			    } 
			button {
				height: 42px; 
				width: 42px; 
				cursor: pointer; 
				position: absolute; 
				}
		    .bar6 {
		    	background: #F9F0DA;
		    	} 
		    .bar6 input {
		    	 border: 2px solid #c5464a; 
		    	 border-radius: 5px; 
		    	 background: transparent; 
		    	 top: 0; 
		    	 right: 0; 
		    	 } 
		    .bar6 button { 
		    	 background: #c5464a;
		    	 border-radius: 0 5px 5px 0; 
		    	 width: 60px; 
		    	 top: 0; 
		    	 right: 0; 
		    	 }
		    .bar6 button:before { 
		    	 content: "搜索"; 
		    	 font-size: 13px; 
		    	 color: #F9F0DA; 
		    	 }
	
	    	form { 
	    		 position: relative;
	    		 width: 270px; 
	    		 margin: 0 auto; 
	    		 text-align: center;
	    		 } 
	    		 
	        input, button {
	        	 border: none; 
	        	 outline: none;
	        	  } 
	        	  
	        input { 
	        	width: 270px; 
	        	height: 42px;
	        	padding-left: 13px;
	        	/*text-align: center;*/
	        	  } 
	        	  
	        button { 
	        	height:42px;
	        	width: 42px; 
	        	cursor: pointer;
	        	position: absolute; 
	        	} 
	        	  	        	  
	        .bar{
	        	background: #F9F0DA;
	        	} 
	        		        
	        .bar input { 
	        	border:2px solid #c5464a
	        		}
	        .bar button { 
	        	top: 2px; right: ;
	        		} 
	        .bar button:before { 
	        	content: "\f002"; 
	        	font-family: FontAwesome;
	        	font-size: 16px; 
	        	color: #F9F0DA; 
	        	} 
	         .bar input:focus { 
	        	border-color: #311c24;
	        	}
             video {
                width: 100%;
                height: auto;
                }
                
            ul.nav.nav-tabs{
                text-align: center;
            }
            
            .nav-link{
            	font-size: 19px;
            }
            
            div.search.bar6{
            	height: 60px;
            }
            
            .nav-footer {
				    width: 100%;
				    position: fixed;
				    bottom: 0;
				    left: 0;
				    display: flex;
				    align-items: center;
				    justify-content: space-around;
				    background: #fff;
				    border-top: solid 1px #e6e6e6;
				    padding: 1%;
				    height: 50px;
				}
				.nav-footer a {
				    display: flex;
				    flex-direction: column;
				    align-content: center;
				    align-items: center;
				    font-size: 10px;
				    color: #929292;
				}
				.nav-footer a span img {
				    height: 25px;
				    overflow: hidden;
				    font-size: 23px;
				    padding-top: 2px;
				}
				.mui-icon {
				    font-family: Muiicons;
				    font-size: 24px;
				    font-weight: 400;
				    font-style: normal;
				    line-height: 1;
				    display: inline-block;
				    text-decoration: none;
				    -webkit-font-smoothing: antialiased;
				}
				.nav-footer a {
				    display: flex;
				    flex-direction: column;
				    align-content: center;
				    align-items: center;
				    font-size: 11px;
				    color: #929292;
				}
				    	*{
	        	margin: 0px;
	        	padding: 0px;
	        }
	        
	        body{
	        	font-size: 12px;
                color: #FFF;
                font-family: Arial, Helvetica, sans-serif;
	        }
	        
	        div{
	        	display: block;
	        }
	        
	        a{
	             text-decoration: none;	
	        }
	        
	        li{
	        	list-style: none;
	        	display: list-item;
                text-align: -webkit-match-parent;
	        }
	        
	        /*头部*/
        	.mt_header{
        		background-color: black;
        	}
        	
        	.searchcontent{
        		float: right;
        		height: 39px;
        		width: 215px;
        	}
        	
        	.search_box{
        		height: 30px;
                width: 65%;
        	}
        	
        	button.search{
        		width: 34px;
        		height: 31px;
        	}
        	.carousel-inner img {
                width: 100%;
                height: 100%;
            }
            /*精彩活动*/
           div.jingcai{           	   
           	    width: 375px;
           	    height:680px ;
           	    margin-top: 20px;          	 
           }
            div.jingcai_inner{
            	height: 468px;
                background: #f5f5f5;
            }

            div.jingcai_top{
            	height: 40px;
            	border-bottom: 2px solid gray;
            }
            
            .jingcai_top{
            	position: relative;
            }
            
            .fa{
            	position:absolute ;
                left: 0px;
                top: 12px;
                color: #C10C0C;
            }
          
            .discover{
            	float: left;
                font-size: 20px;
                font-weight: normal;
                line-height: 40px;
                text-decoration: none;
                color: #333;
                position: absolute;
                left: 40px;
                top: -2px;
            }
            
            span.more a{
            	color: #666666;
                text-decoration: none;
                font-size: 12px;
                font-family: Arial, Helvetica, sans-serif;
                position: absolute;
                left: 320px;
                top: 12px;
            }
            
            span.more .fa{
            	position: absolute;
                left: 350px;
                top: 12px;
                color: #C10D0C;
            }
            
            .jingcai_inner .activity_inner{
            	margin: 8px;
            	width: 355px;
            	height: 150px;
            	border: solid 1px groove;
            }
            
            div.inner .roll ul li img{
            	width: 95%;
            	height: 100%;
            	position: absolute;
            }
            
            div.inner .roll ul li span{
            	position: relative;
            	top: 118px;
            	left: 10px;
            }
            
            div.inner .roll ul li p.active_activity{
            	float: right;
            	position: relative;
            	top: 118px;
            	left: -128px;
            }
            
            div.inner .roll ul li p.master_activity{
            	float: right;
            	position: relative;
            	top: 118px;
            	left: -220px;
            }
            
            .fa-universal-access{
            	float: left;
            }
            
            div.inner .roll ul li span.after{
             	position: absolute;
             	bottom: 0px;
             	right: 0px;
             }
             
            div.inner .roll ul li span.after  p{
            	color: #FFF;
            	position: relative;
            	left: 259px;
                top: -6px;
            }
            
            i.fa.fa-universal-access::before{
            	position: absolute;
            	bottom: -6px;
            	left: 228px;
            }
            
             div.master{
           	    width: 375px;
           	    height:368px ;
           	    margin-top: 20px;          	 
           }
           
           div.contest{
           	    width: 375px;
           	    height:368px ;
           	    margin-top: 20px;          	 
           }
      .nav-footer {
				    width: 100%;
				    position: fixed;
				    bottom: 0;
				    left: 0;
				    display: flex;
				    align-items: center;
				    justify-content: space-around;
				    background: #fff;
				    border-top: solid 1px #e6e6e6;
				    padding: 1%;
				    height: 50px;
				}
				.nav-footer a {
				    display: flex;
				    flex-direction: column;
				    align-content: center;
				    align-items: center;
				    font-size: 10px;
				    color: #929292;
				}
				.nav-footer a span img {
				    height: 25px;
				    overflow: hidden;
				    font-size: 23px;
				    padding-top: 2px;
				}
				.mui-icon {
				    font-family: Muiicons;
				    font-size: 24px;
				    font-weight: 400;
				    font-style: normal;
				    line-height: 1;
				    display: inline-block;
				    text-decoration: none;
				    -webkit-font-smoothing: antialiased;
				}
				.nav-footer a {
				    display: flex;
				    flex-direction: column;
				    align-content: center;
				    align-items: center;
				    font-size: 11px;
				    color: #929292;
				}
            .navLink{
	            text-decoration: none;
	            color: #000000;
            }
				
	</style>
	<body>

	
	<header class="mt_header">
			<div class="mt_header_box">
				<img src="img/logo.gif"/>
				<!--搜索按钮-->
				<form action="#" class="searchcontent">					
					<input type="search" placeholder="内容搜索" class="search_box"/>
					<button class="search">搜索</button>
				</form>				
			</div>
	</header>
  
         <video width="400" controls>
            <source src="mov_bbb.mp4" type="video/mp4">
            <source src="video/mv.mp4" type="video/ogg"> 
         </video>
         
     <div class="container">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">入门</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">菜鸟</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">进阶</a>
    </li>
     <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu3">全部</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      	 <div class="row">
      	 	
      	 	 <div class="row">
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="" class="contest_img3" id="active_img">
            <p class="active_activity contest_text3" id="active_text">loding</p>
        </a>
    </div>  
</div>

  
</div>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <div class="row">
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
          <img src="" class="contest_img5" id="active_img">
          <p class="active_activity contest_text5" id="active_text">loding</p>
        </a>
    </div>
</div>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
    <div class="row">
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
           <img src="" class="contest_img4" id="active_img">
           <p class="active_activity contest_text4" id="active_text">loding</p>
        </a>
    </div>   
    </div>
    </div>
     <div id="menu3" class="container tab-pane fade"><br>
       <div class="row">
       	 <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
           <img src="" class="contest_img1" id="active_img">
           <p class="active_activity contest_text1" id="active_text">loding</p>
        </a>
    </div>
     <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
           <img src="" class="contest_img2" id="active_img">
           <p class="active_activity contest_text2" id="active_text">loding</p>
        </a>
    </div>
     <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
           <img src="" class="contest_img3" id="active_img">
           <p class="active_activity contest_text3" id="active_text">loding</p>
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
           <img src="" class="contest_img4" id="active_img">
           <p class="active_activity contest_text4" id="active_text">loding</p>
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
          <img src="" class="contest_img5" id="active_img">
          <p class="active_activity contest_text5" id="active_text">loding</p>
        </a>
    </div>
    <!--<div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="" class="contest_img6" id="active_img">
            <p class="active_activity contest_text6" id="active_text">loding</p>
        </a>
    </div>-->
</div>
    </div>
  </div>
</div>   

<div class="nav-footer">
			<a class="" href="index.html">
				<span><img src="img/home.png"/></span>
				<span class="mui-tab-label">联盟</span>
			</a>
			<a href="trail.html">
				<span><img src="img/sport.png"/></span>
				<span class="mui-tab-label">训练</span>
			</a>
			<a href="showpicture.html">
				<span><img src="img/picture.png"/></span>
				<span class="mui-tab-label">晒图</span>
			</a>
			<a class="icon-active" href="club.html">
				<span><img src="img/clubs.png"/></span>
				<span class="mui-tab-label">俱乐部</span>
			</a>
			<a href="mine.html">
				<span><img src="img/mine.png"/></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</div>
<script type="text/javascript">
	 $(function() {
            var url = "http://172.24.10.175/workout/api.php/lists/mod/train/";
            $.ajax({
                type: 'post',
                url: url,
                cache: false,
                dataType: 'jsonp',
                success: function (data) {
                    for (var i =0;i<6;i++){
                        $(".contest_img"+i).attr("src","http://172.24.10.175/workout/Uploads/"+data[i].thumb);
                        $(".contest_text"+i).text(data[i].name);                    
                    }
                }
            });
        });
</script>

	</body>
</html>
